<template>
  <div class="bottom_box flex1 bk flexC positionR">
    <div class="title flex AlignItemsC font_s16"><i class="title_line"></i><span class="title_txt">实时在园人数</span>
      <ul class="color_ul ">
        <li class="font_s12"><span class="color_c" style="background: #ff5719"></span>最大数</li>
        <li class="font_s12"><span class="color_c" style="background: #face35"></span>预警数</li>
        <li class="font_s12"><span class="color_c" style="background: #00B3FF"></span>在园人数</li>
      </ul>
      <p class="font_s14 flex select_box" style="z-index: 1">
        <span
                @click="jiangunleibie2(1)"
                class="select_item cursor"
                :class="{jiangunlb:jiangunlb2==1}"
        >经营性</span>
        <span
                @click="jiangunleibie2(0)"
                class="select_item cursor"
                :class="{jiangunlb:jiangunlb2==2}"
                style="border-left: 1px solid rgb(77, 145, 223);"
        >公益性</span>
      </p>
    </div>
    <div class="flex" style="right: 4%;position: absolute;top: 4rem;z-index: 2">
      <img src="../../assets/img/dataSea/left_arrow.png" alt=""
           v-if="current > 1"
           class="cursor"
           @click="goPage(current)"
           style="width: 1.04rem;height: 1.3rem;margin-right: 1rem"/>
      <img src="../../assets/img/dataSea/right_arrow.png" alt=""
           v-if="current < totalPage"
           class="cursor"
           @click="nextPage(current)"
           style="width: 1.04rem;height: 1.3rem"/>
    </div>
    <column-echart-view3
            :height=heightStyle
            :width=widthStyle
            :arrX=arrX
            :arrY=arrY
            :arrY2=arrY2
            :arrY3=arrY3
            :legendData=legendList
    />
  </div>
</template>

<script>
  import { queryPeopleMaxNum } from '@/api/home'
  import ColumnEchartView3 from "./fxyp/echarts/ColumnEchartView3"
export default {
  name: 'DataSeaBottom',
  components: {ColumnEchartView3},
  data () {
    return {
      jiangunlb: 1,
      jiangunlb2: 1,
      totalPage: 0,
      total: 0,
      current: 1,
      pageSize: 12,
      widthStyle: '2000px',
      heightStyle: '98%',
      fxypChar1Left: 0,
      echartBottomId: 'echartBottomId',
      divWidth: '',
      legendList: ['最大数', '预警数', '在园人数'],
      arrX: [],
      arrY: [],
      arrY2: [],
      arrY3: [],
      type: 1
    }
  },
  async mounted () {
    this.jiangunleibie2(1)
  },
  methods: {
    goPage(cur) {
      this.current = cur - 1
      this.echartDataFun()
    },
    nextPage(cur) {
      this.current = cur + 1
      this.echartDataFun()
    },
    jiangunleibie2 (index) {
      this.type = index
      if (index === 0) {
        this.jiangunlb2 = 2
      } else {
        this.jiangunlb2 = 1
      }
      this.totalPage = 0
      this.total = 0
      this.current = 1
      this.pageSize = 12
      if (index === 1) {
        this.echartDataFun()
      } else if (index === 0) {
        this.echartDataFun()
      }
    },
    async echartDataFun () {
      this.arrX = []
      this.arrY = []
      this.arrY2 = []
      this.arrY3 = []
      queryPeopleMaxNum({
        page: this.current,
        pageSize: this.pageSize,
        isOperate: this.type
      }).then((response) => {
        if (response.data.response) {
          this.total = response.data.count ? response.data.count : 0
          this.totalPage = Math.ceil(this.total / 12)
           let list = response.data.response
           list.forEach(item => {
             this.arrX.push(item.shortName)
             this.arrY3.push(item.maxNum)
             this.arrY2.push(item.warnNum)
             this.arrY.push(item.area3)
           })
        }
      }).catch((response) => {
        console.log(response)
      })
    },
  }
}
</script>

<style scoped lang="scss">
  .color_ul {
    margin-left: 3rem;
  }
  .color_ul li {
    float: left;
    display: flex;
    justify-items: center;
    align-items: center;
    margin-right: 1rem;
  }
  .color_c {
    width: 1rem;
    height: .6rem;
    border-radius: 3px;
    display: inline-block;
    margin-right: .3rem;
  }
  .bk {
    background: url("~@/assets/img/zhjg/long_bg.png") no-repeat;
    background-size: 100% 100%;
    padding: .6rem .5rem .5rem .5rem;
    box-sizing: border-box;
  }
  .title {
    width: 100%;
    height: 2.8125rem;
    line-height: 2.8125rem;
    padding-left: 1rem;
    position: absolute;
    top: .7rem;
    left: .7rem;
    background: url("../../assets/img/zhjg/ic_baioqian.png") no-repeat;
    background-size: 100% 100%;
    font-family: PingFang SC;
    .title_line {
      width: 3px;
      height: 1.125rem;
      margin-right: .6rem;
      background: linear-gradient(0deg, #87CCED, #D8FBFE);
    }
    .title_txt{
      font-weight: bold;
      height: 2.8125rem;
      line-height: 2.8125rem;
      color: #97E2F4;
      background: linear-gradient(0deg, #87CCED 0%, #D8FBFE 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .select_box {
    position: absolute;
    right: 6%;
    top: .5rem;
    color: #bcf3fe;
    border: solid 1px #4d91df;
    border-radius: 0.3125rem;
    line-height: 1.75rem;
  }
  .select_item {
    display: inline-block;
    padding: 0.1895rem 0.625rem;
  }
  .jiangunlb {
    background: #4d91df!important;
    color: #ffffff!important;
  }
  .echarts {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  .bottom_box {
    width: 99.5%;
    height: 100%;
    margin: .5rem 1rem 0 .5rem;
    position: relative;
    overflow: hidden;
    /*.title {
      line-height: 2.1875rem;

      padding-left: 2.5rem;
      .title_img {
        width: 1.4375rem;
        margin: 0 0.2rem 0 1rem;
        height: 1.75rem;
        position: absolute;
        top: 0.4rem;
        left: -0.2rem;
      }
    }*/
  }
</style>
